<template>
  <div class="main">
    <Top name1='数据统计' name2="数据报表"></Top>
    <el-card id="main"></el-card>
  </div>
</template>
<script>
import Top from '../../components/top.vue';
import { getreport } from '../../api/reports';
import * as echarts from 'echarts'
  export default {
    components: {
      Top
    },
    data () {
      return {
        list:[]
      };
    },
    created() {
    },
    async mounted() {
     
        const res = await getreport()
 
        if(res.data.meta.status!==200){
          return this.$message.error("获取报表失败")
        }
        this.list = res.data.data
        console.log(this.list);
      
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: this.list.legend.data
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '7%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis:this.list.xAxis,
        yAxis: this.list.yAxis,
        series:this.list.series
      
      };

      option && myChart.setOption(option);
      

    },
  }
</script>
<style lang='scss' scoped>
.main{
  padding: 20px 40px;
  position: relative;
  #main{
    padding: 100px;
    height: 600px;
  }
  .block{
    display: flex;

    width: 1100px;
    position: absolute;
    bottom: -160px;
    justify-content: center;
  }
  .sm{
    padding: 10px;
    font-size: 12px;
  }
}
</style>